<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-11-07 09:43:46
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-01-02 16:36:55
 * @FilePath: /hr_new_vue3/src/views/Management/Contract/BaseSetting/ContractTemplate/Components/AddTemplate/ContractBaseInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 合同页眉设置 -->
<template>
  <div class="index">
    <h3>可设置显示在合同模板上的页眉内容，生成PDF文件时会自动显示</h3>
    <a-form
      :model="formData"
      ref="refForm"
      :rules="rules"
      auto-label-width
      layout="vertical"
    >
      <a-form-item @change="change" label="样式" field="style" show-colon>
        <a-radio-group v-model="formData.style">
          <template v-for="item in 3" :key="item">
            <a-radio :value="item">
              <template #radio="{ checked }">
                <a-space
                  align="start"
                  class="custom-radio-card"
                  :class="{ 'custom-radio-card-checked': checked }"
                >
                  <!-- <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot" />
                  </div> -->
                  <div>
                    <div
                      class="custom-radio-card-title"
                      :class="item === 2 ? 'center' : ''"
                    >
                      <div v-if="item !== 3">
                        <a-avatar :size="24" class="logo">logo</a-avatar>
                        <span class="ml-1">xxx有限公司</span>
                      </div>
                    </div>
                    <div class="custom-radio-card-content">模板内容</div>
                  </div>
                </a-space>
              </template>
            </a-radio>
          </template>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="企业logo"
        field="logo"
        show-colon
        :rules="[
          {
            required: formData.style !== 3 ? true : false,
            message: '请上传企业logo'
          }
        ]"
      >
        <a-upload
          :action="postURL"
          accept="image/png, image/jpeg, image/jpg"
          @success="onSuccess"
          @before-upload="beforeUpload"
          @before-remove="beforeRemove"
          tip="支持jpg、jpeg、png格式，文件大小≤3M"
          :limit="1"
          :default-file-list="defaultFile"
        />
        <!-- <a-upload
          v-else
          action="http://192.168.0.178:30058/lke_file"
          accept="image/png, image/jpeg, image/jpg"
          @success="onSuccess"
          @before-upload="beforeUpload"
          @before-remove="beforeRemove"
          tip="支持jpg、jpeg、png格式，文件大小≤3M"
          :limit="1"
          :default-file-list="defaultFile"
        /> -->
      </a-form-item>
      <a-form-item label="企业名称" field="enterpriseName" show-colon>
        <a-input v-model="formData.enterpriseName"></a-input>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { cloneDeep } from 'lodash';
import { Modal, Message } from '@arco-design/web-vue';
import { PostFile } from '@/apis/management/base';
import { PerformanceAppraisal } from '@/apis/management/performance/baseSetting/template/type';
const env = import.meta.env;
const postURL = env.VITE_YANCHAO_UPLOAD_URL;

const props = withDefaults(
  defineProps<{
    data: any;
  }>(),
  {}
);

const emit = defineEmits(['update:templateData']);
const change = () => {
  emit('update:templateData', formData.value);
};
const formData = ref<any>({
  style: 1,
  enterpriseName: '',
  logo: ''
});

let refForm = ref();
const rules = reactive({
  name: [
    {
      required: true,
      message: '请输入'
    },
    {
      // validator: validateName
    }
  ],
  enterpriseName: [
    {
      required: true,
      message: '请输入'
    }
  ]
});

let defaultFile = ref([]);
watch(
  () => props.data,
  (newVal: any) => {
    formData.value = cloneDeep(newVal);
    if (props.data.enterpriseName !== '') {
      defaultFile.value.push({
        url: newVal.logo,
        name: '企业logo',
        uid: '-1'
      });
    }
  },
  {
    immediate: true,
    deep: true
  }
);

const onSuccess = async (fileItem: any) => {
  try {
    const res = await PostFile({
      file: fileItem.file
    });
    formData.value.logo = res;
  } catch (error: any) {
    console.log(error);
  }
};

const beforeUpload = (file: any) => {
  return new Promise((resolve, reject) => {
    if (file.size > 300000) {
      Message.error('上传文件的大小大于3M,请换一张小于3M的图片');
      reject();
    }
    resolve(true);
  });
};

const beforeRemove = (file) => {
  return new Promise((resolve, reject) => {
    Modal.confirm({
      title: '确定删除已上传的logo吗？',
      content: `确认删除 ${file.name}`,
      onOk: () => {
        formData.value.logo = undefined;
        resolve(true);
      },
      onCancel: () => reject('取消删除')
    });
  });
};

const validate = async () => {
  if (await refForm.value.validate()) {
    return true;
  } else return false;
};

defineExpose({ formData, validate });
</script>

<style lang="less" scoped>
.index {
  width: 800px;
  margin: 0 auto;

  h3 {
    display: flex;
    justify-content: center;
  }

  .custom-radio-card {
    padding: 10px 16px;
    border: 1px solid var(--color-border-2);
    border-radius: 4px;
    width: 300px;
    height: 170px;
    box-sizing: border-box;
    margin: 10px;
  }

  .custom-radio-card-title {
    height: 20px;
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
  }

  .custom-radio-card:hover,
  .custom-radio-card-checked,
  .custom-radio-card:hover .custom-radio-card-mask,
  .custom-radio-card-checked .custom-radio-card-mask {
    border-color: rgb(var(--primary-6));
  }

  .custom-radio-card:hover .custom-radio-card-title,
  .custom-radio-card-checked .custom-radio-card-title {
    color: rgb(var(--primary-6));
  }

  .custom-radio-card-checked .custom-radio-card-mask-dot {
    background-color: rgb(var(--primary-6));
  }

  .custom-radio-card-content {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-color: #eee;
    width: 260px;
    height: 114px;
    text-align: center;
    line-height: 114px;
    color: #ccc;
  }

  .center {
    display: flex;
    justify-content: center;
  }
}
</style>
